<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title>例子</title>

    <style>
        body {
            padding-left: 1rem;
            h3~div {
                padding-left: 2rem;
            }
        }
    </style>
</head>

<body>
    <h1>css样式</h1>
    <h3>字体图标:icon</h3>
    <div id="icon">
        <i class="icon icon-search"></i>
        <i class="icon icon-lock"></i>
        <i class="icon icon-user"></i>
        <i class="icon icon-add"></i>
        <i class="icon icon-setting"></i>
        <i class="icon icon-hollow"></i>
        <i class="icon icon-heart"></i>
        <i class="icon icon-sync"></i>
        <i class="icon icon-radio"></i>
        <i class="icon icon-radio-checked"></i>
        <i class="icon icon-checkbox"></i>
        <i class="icon icon-checkbox-checked"></i>
        <i class="icon icon-msg"></i>
        <i class="icon icon-friend"></i>
        <i class="icon icon-editor"></i>
    </div>
    <h3>按钮:bitton2</h3>
    <div id="button">
        <div>
            <button class="btn btn-default btn-xs">默认小号</button>
            <button class="btn btn-default btn-sm">默认中号</button>
            <button class="btn btn-default">默认正常</button>
            <button class="btn btn-default  btn-lg">默认大号</button>
            <button class="btn rounded btn-primary">注册</button>
        </div>
        <br/>
        <div>
            <button class="btn btn-primary btn-xs">主要小号</button>
            <button class="btn btn-primary btn-sm">主要中号</button>
            <button class="btn btn-primary">主要正常</button>
            <button class="btn btn-primary btn-lg">主要大号</button>
        </div>
        <br/>
        <div>
            <button class="btn btn-primary btn-block btn-xs">块级大号</button>
            <br/>
            <button class="btn btn-primary btn-block btn-sm">块级大号</button>
            <br/>
            <button class="btn btn-primary btn-block">块级大号</button>
            <br/>
            <button class="btn btn-primary btn-block btn-lg">块级大号</button>
        </div>
    </div>
    <h3>表单:form</h3>
    <div id="form">
        <h5>普通输入框</h5> 文字描述：
        <input type="text" placeholder="普通输入框">
        <h5>普通文本域</h5> 文字描述：
        <textarea rows="3" placeholder="普通文本域"></textarea>
        <h5>带图标的输入框</h5> 文字描述：
        <div class="input-icon">
            <input type="text" placeholder="普通输入框">
            <i class="icon icon-search"></i>
        </div>
        文字描述：
        <div class="input-icon r">
            <input type="text" placeholder="普通输入框">
            <i class="icon icon-search"></i>
        </div>
        <h5>带按钮的输入框</h5> 文字描述：
        <div class="input-btn">
            <input type="text" placeholder="带按钮的输入框"><button class="btn btn-primary">搜索</button>
        </div>
        <h5>下拉列表</h5> 文字描述：
        <select name="" id="">
            <option selected>德玛西亚</option>
            <option>光辉女郎</option>
        </select>
        <h5>单选</h5>
        <input type="radio" checked name="test" id="radio1">
        <label for="radio1">德玛西亚</label>&emsp;
        <input type="radio" name="test" id="radio2">
        <label for="radio2">暗黑火女</label>&emsp;
        <input type="radio" name="test" id="radio3">
        <label for="radio3">蛮三刀</label>
        <h5>多选</h5>
        <input type="checkbox" checked name="test" id="checkbox1">
        <label for="checkbox1">德玛西亚</label>&emsp;
        <input type="checkbox" name="test" id="checkbox2">
        <label for="checkbox2">暗黑火女</label>&emsp;
        <input type="checkbox" checked name="test" id="checkbox3">
        <label for="checkbox3">蛮三刀</label>
        <h5>只读</h5> 文字描述：
        <input type="text" placeholder="普通输入框" disabled value="来打我呀">
        <input type="radio" checked name="test" id="radio4" disabled>
        <label for="radio4">德玛西亚</label>&emsp;
        <input type="checkbox" checked name="test" id="checkbox4" disabled>
        <label for="checkbox4">蛮三刀</label>
    </div>
    <hr>
    <h1>组件</h1>
    <h3>弹出层</h3>
    <div id="modal">
        <button class="btn btn-default btn-sm" id="modal1">普通弹出层</button>
        <button class="btn btn-default btn-sm" id="modal2">不带背景弹出层</button>
        <button class="btn btn-default btn-sm" id="modal3">小弹出层</button>
        <button class="btn btn-default btn-sm" id="modal4">大弹出层</button>
        <button class="btn btn-default btn-sm" id="modal5">自定样式弹出层</button>
        <button class="btn btn-default btn-sm" id="modal6">带事件的</button>
        <button class="btn btn-default btn-sm" id="modal7">多层</button>
        <button class="btn btn-default btn-sm" id="modal8">超高</button>
        <button class="btn btn-default btn-sm" id="modal9">带标题</button>
    </div>
    <h3>弹出框</h3>
    <div id="alert1">
        <button class="btn btn-default btn-sm">alert</button>
    </div>
    <h3>确认框</h3>
    <div id="confirm">
        <button class="btn btn-default btn-sm">confirm</button>
    </div>
    <h3>loading</h3>
    <div id="loading">
        <button class="btn btn-default btn-sm">显示loading且3秒后隐藏</button>
    </div>
    <hr>
    <h3>业务组件</h3>
    <div id="floattools"></div>
    <h3>富文本编辑器</h3>
    <div id="texteditor"></div>
    <h3>toast</h3>
    <button class="btn btn-default btn-sm" id="toast">自动关闭toast</button>
    <button class="btn btn-default btn-sm" id="toast1">不自动关闭toast</button>
    <button class="btn btn-default btn-sm" id="toast2">1秒后自动关闭toast</button>
    <h3>右键菜单</h3>
    <div id="contextmenu"></div>
    <script src="./dist/vendor.js"></script>
    <script src="./dist/demo.js"></script>
</body>

</html>
